<template>
  <view class="container">
    <view class="message-list">
      <view v-for="(message, index) in messages" :key="index" class="message-item">
        <view class="message-content">
          {{ message.content }}
        </view>
        <view class="message-time">
          {{ message.time }}
        </view>
      </view>
    </view>
    <view class="message-input">
      <input type="text" v-model="newMessage" placeholder="请输入消息" class="input-field" @keyup.enter="sendMessage">
      <button type="button" @click="sendMessage" class="send-button">发送</button>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      messages: [
        { content: '您好，有什么需要帮助的吗？', time: '09:00' },
        { content: '我想了解如何使用您的产品。', time: '09:02' },
        { content: '当然，我们很乐意为您提供帮助。您可以在我们的网站上找到产品的详细信息和使用说明。', time: '09:05' }
      ],
      newMessage: ''
    }
  },
  methods: {
    sendMessage() {
      if (this.newMessage.trim()) {
        const time = new Date().toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' });
        this.messages.push({ content: this.newMessage.trim(), time });
        this.newMessage = '';
      }
    }
  }
}
</script>

<style>
.container {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 10px;
}

.message-list {
  flex: 1;
  overflow-y: scroll;
}

.message-item {
  display: flex;
  margin-bottom: 10px;
}

.message-content {
  background-color: #EFEFEF;
  padding: 10px;
  border-radius: 10px;
  max-width: 70%;
}

.message-time {
  margin-left: 10px;
  font-size: 12px;
  color: #999;
}

.message-input {
  display: flex;
  margin-top: 10px;
}

.input-field {
  flex: 1;
  padding: 10px;
  border-radius: 5px;
  border: 1px solid #999;
  margin-right: 10px;
}

.send-button {
  background-color: #007AFF;
  color: #fff;
  border: none;
  border-radius: 5px;
  padding: 10px;
}
</style>